<template>
  <div class="main">
    <el-col style="height: 100%">
      <div class="topLogo">
        <div class="logo">
          <i
            class="el-icon-menu"
            style="
              font-size: 45px;
              width: 45px;
              color: rgb(191, 203, 217);
              margin-top: 5px;
            "
          ></i>
          <span
            style="
              text-transform: Uppercase;
              color: rgb(191, 203, 217);
              letter-spacing: 2px;
              font-size: 30px;
              font-weight: 600;
            "
            >record</span
          >
        </div>
      </div>
      <el-menu
        :defaultActive="$route.path"
        style="height: calc(100% - 56px)"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="rgb(48, 65, 86)"
        text-color="rgb(191, 203, 217)"
        active-text-color="rgb(64, 158, 255)"
        router
      >
        <template v-for="(navigation, index) in navigationList">
          <template v-if="navigation.item">
            <el-submenu :key="index" :index="navigation.navigationIndex">
              <template #title>
                <i :class="navigation.icon"></i>
                <span>{{ navigation.title }}</span>
              </template>
              <template
                v-for="list in navigation.item"
                :key="list.chidrenIndex"
              >
                <el-menu-item :index="list.chidrenIndex">{{
                  list.title
                }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :key="index" :index="navigation.navigationIndex">
              <i :class="navigation.icon"></i>
              <span>{{ navigation.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["navigationList"],
  data() {
    return {
      current: "/home",
    };
  },
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      this.current = key;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .topLogo {
    height: 56px;
    width: 100%;
    background-color: rgb(48, 65, 86);
    box-sizing: border-box;
    padding: 0 20px;
    line-height: 56px;
    border-right: solid 1px #e6e6e6;
    // height: calc(100% - 56px);
  }
}
.el-menu-item-group .el-menu-item.demo:hover {
  background-color: #263445 im !important;
}
</style>
